<template>
  <el-container style="height: 100vh">
    <el-header
      style="
        background-color: rgba(0, 132, 255, 0.8);
        line-height: 60px;
        color: #fff;
      "
    >
      <el-row :gutter="20">
        <el-col :span="16">
          <i class="el-icon-orange logo"></i>
          综测评分系统
        </el-col>
        <el-col :span="8" style="text-align: right">
          {{ userInfo.studentName }}
          <el-button type="info" @click="logout" style="color: #000"
            >退出</el-button
          >
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          style="height: 100%"
          background-color="rgba(0,132,255)"
          text-color="#000"
          active-text-color="#ffd04b"
          router
          :default-active="activeUrl"
          unique-opened
        >
          <template v-for="item in menu">
            <el-submenu
              :index="item.path"
              v-if="item.children"
              :key="item.path"
            >
              <template #title style="color: #000"
                ><i :class="item.icon" style="color: #fff"></i
                >{{ item.text }}</template
              >
              <div :key="ite.path" v-for="ite in item.children">
                <el-submenu
                  :index="ite.path"
                  v-if="ite.children"
                  :key="ite.path"
                >
                  <template #title style="color: #000">{{ ite.text }}</template>
                  <el-menu-item
                    :index="
                      item.path +
                      ite.path +
                      it.path +
                      '/' +
                      ite.grade +
                      it.grade
                    "
                    v-for="it in ite.children"
                    :key="it.path"
                    >{{ it.text }}</el-menu-item
                  >
                </el-submenu>
                <el-menu-item
                  v-else
                  :index="item.path + ite.path + '/' + ite.grade"
                  :key="ite.path"
                  >{{ ite.text }}</el-menu-item
                >
              </div>
            </el-submenu>
            <el-menu-item :key="item.path" :index="item.path" v-else
              ><i :class="item.icon" style="color: #fff"></i
              >{{ item.text }}</el-menu-item
            >
          </template>
        </el-menu>
      </el-aside>
      <el-main style="background-color: #ccc">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import Vue from "vue";
import { mapState, mapMutations } from "vuex";
import {
  Container,
  Header,
  Aside,
  Main,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
} from "element-ui";
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
export default {
  name: "Home",
  data() {
    return {
      activeUrl: "/AdminManageHome",
      menu: [
        {
          path: "/manage/home",
          text: "首页",
          icon: "el-icon-s-home",
        },
        {
          path: "/manage/information",
          text: "个人中心",
          icon: "el-icon-user",
        },
        {
          path: "/manage/score",
          text: "评分细则",
          icon: "el-icon-s-order",
        },
        {
          path: "/manage/establish",
          text: "创建综测表",
          icon: "el-icon-s-operation",
          children: [
            {
              path: "/Freshman",
              grade: "大一",
              text: "大一综测表",
            },
            {
              path: "/Sophomore",
              grade: "大二",
              text: "大二综测表",
            },
            {
              path: "/Junior",
              grade: "大三",
              text: "大三综测表",
            },
            {
              path: "/Senior",
              grade: "大四",
              text: "大四综测表",
            },
          ],
        },
        {
          path: "/manage/Paid",
          text: "已提交综测表",
          icon: "el-icon-s-operation",
          children: [
            {
              path: "/Freshman",
              grade: "大一",
              text: "大一综测表",
              children: [
                {
                  path: "/gradeOne",
                  grade: "第一学期",
                  text: "第一学期综测表",
                },
                {
                  path: "/gradeTow",
                  grade: "第二学期",
                  text: "第二学期综测表",
                },
              ],
            },
            {
              path: "/Sophomore",
              grade: "大二",
              text: "大二综测表",
              children: [
                {
                  path: "/gradeOne",
                  grade: "第一学期",
                  text: "第一学期综测表",
                },
                {
                  path: "/gradeTow",
                  grade: "第二学期",
                  text: "第二学期综测表",
                },
              ],
            },
            {
              path: "/Junior",
              grade: "大三",
              text: "大三综测表",
              children: [
                {
                  path: "/gradeOne",
                  grade: "第一学期",
                  text: "第一学期综测表",
                },
                {
                  path: "/gradeTow",
                  grade: "第二学期",
                  text: "第二学期综测表",
                },
              ],
            },
            {
              path: "/Senior",
              grade: "大四",
              text: "大四综测表",
              children: [
                {
                  path: "/gradeOne",
                  grade: "第一学期",
                  text: "第一学期综测表",
                },
                {
                  path: "/gradeTow",
                  grade: "第二学期",
                  text: "第二学期综测表",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
    
  },
  created(){this.activeUrl=this.$route.path},
  methods: {
    ...mapMutations("user", {
      logout(commit) {
        commit("logout");
        this.$router.push("/login");
      },
    }),
  },
};
</script>
<style lang="scss" scoped>
</style>